<template>
  <div class="home">
    <div class="head">
      <b>欢迎您！{{this.user}}</b>
      <h1>商品页</h1>
      <el-button @click="outlogin">退出登录</el-button>
    </div>
    <div class="listWrap">
      <el-input v-model="values" placeholder="请输入内容" @input="selectItem()"></el-input>
      <dl v-for="(v, i) in list" :key="i">
        <dt><img :src="v.url" alt="" /></dt>
        <dd>{{ v.detail }}</dd>
        <dd>￥{{ v.price }}</dd>
      </dl>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :total="total"> </el-pagination>
    </div>
    
  </div>
</template>

<script>
import { getList } from "../api/home";
export default {
  name: "Home",
  data() {
    return {
      list: [],
      total: 0,
      values:'',
      user:localStorage.getItem('user')
    };
  },
  methods: {
    async http(pageIndex = 0, pageSize = 5) {
      const res = await getList("/getlists", { pageIndex, pageSize, values:this.values });
      console.log(res);
      this.list = res.data.data;
      this.total=res.data.total
    },
    handleCurrentChange(index){
      this.http(index)
    },
    selectItem(){
      this.http()
    },
    outlogin(){
      localStorage.clear()
      this.$router.push('/')
    }
  },
  created() {
    this.http();
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
}
.listWrap {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
  background: #fff;
  .el-input{
    padding: 10px 100px;
  }
  .el-pagination{
    display: flex;
    justify-content: center;
  }
  dl {
    width: 100%;
    height: 120px;
    display: flex;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    dt {
      width: 120px;
      margin-right: 30px;
    }
    dd {
      font-size: 14px;
      margin: 0 15px;
    }
    .name {
      width: 120px;
    }
  }
}
</style>
